<template>
  <div class="my-dialog">
    <el-dialog :visible="isShow" title="" width="92%" center @close="hideModal" :destroy-on-close="true">
      <!-- 遥测门站弹框 -->
      <div slot="title" class="title">
        {{ pointDetectionState }}详细信息
        <div class="line"></div>
      </div>

      <!-- 企业门禁弹框 -->
      <div v-show="this.dialogBody === 1">
        <div class="dialog-body">
          <div class="leftbox">
            <div class="message">
              <div class="m-title">
                <span>基础信息</span>
                <span class="sanjiao"></span>
                <span class="sanjiao"></span>
              </div>
              <div class="m-list">
                <div class="m-item">
                  <div class="m-icon"></div>
                  <div class="m-data">
                    <span>企业名称</span>
                    <span>{{ leftList.enterpriseName }}</span>
                  </div>
                </div>

                <div class="m-item">
                  <div class="m-icon"></div>
                  <div class="m-data">
                    <span>电话号码</span>
                    <span>{{ leftList.phone }}</span>
                  </div>
                </div>
                <div class="m-item">
                  <div class="m-icon"></div>
                  <div class="m-data">
                    <span>所属地区</span>
                    <span>{{ leftList.district }}</span>
                  </div>
                </div>
                <div class="m-item">
                  <div class="m-icon"></div>
                  <div class="m-data">
                    <span>所属行业</span>
                    <span>{{ leftList.industrys }}</span>
                  </div>
                </div>
                <div class="m-item">
                  <div class="m-icon"></div>
                  <div class="m-data">
                    <span>绩效评级</span>
                    <span>{{ leftList.industryClassification }}</span>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <div class="rightbox">
            <div class="m-controls">
              <div v-for="(item, index) in navs">
                <div class="large-btn1" :class="nav === item.key ? 'active' : ''" @click="changeTab(item)">
                  <div :class="['large-btn', `nav-${item.key}`, nav === item.key ? 'active' : '']">
                  </div>
                  <div style="flex: 1;  font-size: 24px;
  color: #effafb;">{{ item.tips }}</div>
                </div>

              </div>
            </div>
            <div class="content" v-show="nav === 0">
              <div id="Dialogcontainer" style="width: 1268.89px; height: 757.78px;"></div>
            </div>
            <div class="content" v-show="nav === 1">
              <el-form ref="queryForm" :model="queryParams1" size="small" :inline="true">
                <el-form-item prop="ruleName">
                  <el-input v-model="queryParams1.standardEmission" placeholder="排放阶段" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery1" />
                  <el-input v-model="queryParams1.fuelType" placeholder="燃料类型" clearable
                    style="width: 240px; margin-left: 10px;" @keyup.enter.native="handleQuery1" />
                  <el-date-picker v-model="dateTime1" type="datetime" 
                     style="margin-left: 10px;"
                      placeholder="进厂时间"
                     format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss" align="right" popper-class="elDatePicker" >
                  </el-date-picker>
                   <el-date-picker v-model="dateTime2" type="datetime" 
                     style="margin-left: 10px;"
                      placeholder="出厂时间"
                     format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss" align="right" popper-class="elDatePicker" >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="handleQuery1">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="handleReset1">重置</el-button>
                </el-form-item>
              </el-form>

              <!-- 数据表格 -->
              <el-table :data="list" border>
                <el-table-column label="序号" type="index" width="55" align="center" />
                <el-table-column label="车牌号" prop="plateNo" />
                <el-table-column label="排放阶段" prop="standardEmission" />
                <el-table-column label="燃料类型" prop="fuelType" />
                <el-table-column label="进厂时间" prop="inTime" />
                <el-table-column label="出厂时间" prop="outTime" />

              </el-table>

              <pagination v-show="pagination1.total > 0" :total="pagination1.total" :page.sync="pagination1.page"
                :limit.sync="pagination1.limit" @pagination="handleQuery1" />
            </div>

            <div class="content" v-show="nav === 2">
              <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
                <el-form-item prop="ruleName">
                  <el-input v-model="queryParams.standardEmission" placeholder="排放阶段" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
                  <el-input v-model="queryParams.fuelType" placeholder="燃料类型" clearable
                    style="width: 240px; margin-left: 10px;" @keyup.enter.native="handleQuery" />
                    <el-date-picker v-model="dateTime4" type="datetime" 
                     style="margin-left: 10px;"
                      placeholder="进出时间"
                     format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss" align="right" popper-class="elDatePicker" >
                  </el-date-picker>
                   
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
                </el-form-item>
              </el-form>

              <!-- 数据表格 -->
              <el-table :data="list1" border>
                <el-table-column label="序号" type="index" width="55" align="center" />
                <el-table-column label="车牌号" prop="plateNo" />
                <el-table-column label="排放阶段" prop="standardEmission" />
                <el-table-column label="燃料类型" prop="fuelType" />
                <el-table-column label="告警原因" prop="alarmReason" />
                <el-table-column label="处理人" prop="hanlePerson" />
                <el-table-column label="处理状态" prop="hanleStatus" :formatter="formatHandleStatus" />
                <el-table-column label="进出时间" prop="actTime" />
              </el-table>

              <pagination v-show="pagination.total > 0"  :page-sizes="[4]" :total="pagination.total" :page.sync="pagination.page"
                :limit.sync="pagination.limit" @pagination="handleQuery" />

              <!-- <div class="m-list-box">
                <div class="t-tr t-header">
                  <div class="t-th" v-for="(item, index) in Trlist3" :key="index"
                    :class="index === 2 ? 'w-180' : 'w-150'">
                    {{ item }}
                  </div>
                </div>
                <div class="t-tr t-body" v-for="(item, index) in list1" :key="index">
                  <div class="t-th w-150 webkit-box2">{{ item.Akeys1 }}</div>
                  <div class="t-th w-150">{{ item.Akeys2 }}</div>
                  <div class="t-th w-180 webkit-box2">{{ item.Akeys3 }}</div>
                  <div class="t-th w-150">{{ item.Akeys4 }}</div>
                  <div class="t-th w-150">{{ item.Akeys5 }}</div>
                  <div class="t-th w-150">{{ item.Akeys6 }}</div>
                </div>
              </div>
              <div class="m-paging">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="currentPage4" :page-size="10" :pager-count="5"
                  layout="total, prev, pager, next, jumper" :total="pageTotal"
                  :hide-on-single-page="true"></el-pagination>
              </div> -->
            </div>

            <div class="content" style="display: flex; flex-direction: column;" v-show="nav === 3">
              <div style="flex: 1;" class="choice2">
                <el-date-picker v-model="dateTime" type="daterange" :picker-options="pickerOptions" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  align="right" popper-class="elDatePicker" @change="handleDateChange">
                </el-date-picker>

              </div>
              <div style="flex: 5;display: flex;">
                <div style="flex: 1;">
                  <Chart :data=TjData></Chart>
                </div>
                <div style="flex: 1;">
                  <Chart1 :data=TjData></Chart1>
                </div>
              </div>
              <div style="flex: 5;">
                <Chart2 :data=TjData></Chart2>
              </div>

            </div>

          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import XYZ from "ol/source/XYZ";
import { ScaleLine, defaults as defaultControls } from 'ol/control';
import Chart from '@/components/MyDialog/Chart'
import Chart1 from '@/components/MyDialog/Chart1'
import Chart2 from '@/components/MyDialog/Chart2'


import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import ImageLayer from 'ol/layer/Image.js';
import TileLayer from 'ol/layer/Tile.js';
import Projection from 'ol/proj/Projection.js';
import { fromLonLat, transform } from "ol/proj";
import Polygon from "ol/geom/Polygon"
import { Feature } from 'ol';
import TileState from 'ol/TileState'
import { Style, Stroke, Fill, Circle as CircleStyle } from 'ol/style'
import { Vector as SourceVector } from 'ol/source'
import { Vector as LayerVector } from 'ol/layer'
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import Overlay from 'ol/Overlay';
import {
  getMjEnterpriseInfo,
  getMjVehicleLocationPage,
  getYcCheckResult,
  getYcCheckSite
} from "@/api/largescreen";

import {
  getNewCarRecord,
  searchTJ
} from '@/api/hzMJPT/mainInterface.js';

import {
  getWarningComData,
  getRegionVehicleRecord
} from '@/api/hzMJPT/mainInterface.js';
let Trlist1 = [
  "车牌号",
  "日期",
  "CO(g/km)",
  "Nox(g/km)",
  "HC(g/km)",
  "不透光度",
];
let Trlist2 = [
  "进出时间",
  "企业名称",
  "车牌颜色",
  "车牌号码",
  "排放阶段",
  "车辆类型",
];
const Colors = {
  '国三': '#f95454',
  '国四': '#ff9500',
  '国五': '#d4e607',
  '国六': '#07e7f3',
  '新能源': '#07e6ac',

}

let Trlist3 = [
  "进出时间",
  "车牌颜色",
  "车牌号码",
  "排放阶段",
  "车辆类型",
  "告警原因"
];
export default {
  name: "MyDialog",
  components: {
    Chart,
    Chart1,
    Chart2
  },
  data() {
    return {
      GroupMap: { "国三": Colors['国三'], "国四": Colors['国四'], "国五": Colors['国五'], "国六": Colors['国六'], "新能源": Colors['新能源'] },
      TjData: undefined,
      loading: true,
      key: "d7a71c7ad105f0769725901b428c1a79",
      dateTime: [this.getFirstDayOfWeek(), this.getToday()],
      dateTime1: undefined,
      dateTime2: undefined,
      dateTime4: undefined,

      queryParams: {},
      queryParams1: {},
      pagination: {
        page: 1,
        limit: 4,
        total: 0
      },
      pagination1: {
        page: 1,
        limit: 10,
        total: 0
      },
      pickerOptions: {
        disabledDate(time) {
          return time > new Date();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          }
        ],
      },
      layers: [],
      Trlist3: Trlist3,
      nav: 0,
      navs: [
        {
          tips: '电子围栏',
          key: 0
        },
        {
          tips: '进出记录',
          key: 1
        },
        {
          tips: '告警记录',
          key: 2
        },
        {
          tips: '统计分析',
          key: 3
        }
      ],
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      leftList: {
        industrys: "",
        enterpriseName: "",
        phone: "",
        mjNum: "",
        addr: "",
        vehicleTotalNum: "",
        hgvRatio: "",
        siteName: "",
        vehicleNum: "",
        hgvNum: "",
        hgvRatio: "",
      },
      list: [{ Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }, { Akeys1: '2025-1', Akeys2: '测试1', Akeys3: '蓝色', Akeys4: '133111', Akeys5: '新能源', Akeys6: '测试', Akeys7: '挂车' }],
      list1: [],
      Trlist: [],
      pageTotal: 0,
      currentPage4: 1,
      dialogBody: 0,
      pointDetectionState: "企业门禁"
    };
  },
  computed: {
    // ...mapState({
    //   pointDetectionState: (state) => state.pointDetectionPage.isActive,
    // }),
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Object,
      default() {
        return () => { };
      },
    },
  },
  watch: {
    /*点位监控*/
    pointDetectionState: {
      immediate: true,
      deep: true,
      handler(newValue, old) {
        if (newValue === "遥测门站") {
          this.Trlist = Trlist1;
          this.dialogBody = 0;
        } else {
          this.Trlist = Trlist2;
          this.dialogBody = 1;
        }
      },
    },
    dataList: {
      immediate: false,
      deep: true,
      handler(newValue, old) {

        this.nav = newValue.nav
        if (this.nav === 0 && this.map) {
          this.$nextTick(() => {
            this.map.updateSize();
          });
        }
        this.GetMjEnterpriseInfo(newValue.regionId);
        this.GetAlarmData()
        this.GetNewCarRecord()
        this.handleDateChange()
      },
    },
  },
  methods: {
    formatHandleStatus(row) {
      if (row.status == 1) {
        return '未处理'
      } else if (row.status == 2) {
        return '处理中'

      } else if (row.status == 3) {
        return '处理完毕'

      }
    },
    handleQuery() {
      this.loading = true
      this.queryParams.pageNum = this.pagination.page
      this.queryParams.pageSize = this.pagination.limit
      this.queryParams.regionId = this.dataList.regionId
      this.queryParams.actTime = this.dateTime4

      getWarningComData(this.queryParams).then(response => {
        this.list1 = response.data
        this.pagination.total = response.total
        this.loading = false
      })
    },
    handleQuery1() {
      this.queryParams1.page = this.pagination1.page
      this.queryParams1.limit = this.pagination1.limit
      this.queryParams1.regionId = this.dataList.regionId
      this.queryParams1.inTime = this.dateTime1
      this.queryParams1.outTime = this.dateTime2

      getRegionVehicleRecord(this.queryParams1).then(response => {
        this.list = response.data
        this.pagination1.total = response.total
        this.loading = false
      })
    },
    GetNewCarRecord() {
      this.queryParams1.page = this.pagination1.page
      this.queryParams1.limit = this.pagination1.limit
      this.queryParams1.regionId = this.dataList.regionId
      getRegionVehicleRecord(this.queryParams1).then(res => {

        this.list = res.data;
        this.pagination1.total = res.total
        this.loading = false

      }).catch(error => {
        this.loading = false

      });
    },
    GetAlarmData() {
      this.queryParams.pageNum = this.pagination.page
      this.queryParams.pageSize = this.pagination.limit
      this.queryParams.regionId = this.dataList.regionId
      getWarningComData(this.queryParams).then(res => {

        this.list1 = res.data;
        this.pagination.total = res.total
        this.loading = false

      }).catch(error => {
        this.loading = false

      });
    },
    handleReset() {
      this.pagination = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.dateTime4 = null 
      this.queryParams = {
        id: undefined
      }
      this.handleQuery()
    },
    handleReset1() {
      this.pagination1 = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.dateTime1 = null
      this.dateTime2 = null
      this.queryParams1 = {
        id: undefined
      }
      this.handleQuery1()
    },
    handleDateChange() {
      let datelist = this.dateTime
      searchTJ({ stTime: datelist[0] + " 00:00:00", edTime: datelist[1] + " 00:00:00", regionId: this.dataList.regionId })
        .then(res => {
          this.TjData = res.data
        })
    },
    getFirstDayOfWeek() {
      const date = new Date();
      date.setDate(date.getDate() - 7); // 更直观的日期减法

      // 格式化为 YYYY-MM-DD（本地时间）
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getToday() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    initMap(geo) {
      this.$nextTick(() => {
        const p2 = this.initTiandituMap(geo)
      });

    },
    async initTiandituMap(geo) {


      function calculateCentroid(coordinates) {
        let sumX = 0;
        let sumY = 0;
        const points = coordinates[0][0]; // 提取实际的坐标点数组

        for (const point of points) {
          sumX += point[0]; // 经度
          sumY += point[1]; // 纬度
        }

        return {
          lon: sumX / points.length,
          lat: sumY / points.length
        };
      }

      const { lon, lat } = calculateCentroid(geo.coordinates)

      const that = this;
      const url_Vector = "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + this.key


      function modifyTileColor(image) {
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext('2d');

        // 绘制原始图像
        ctx.drawImage(image, 0, 0);

        // 设置合成操作，这里使用 'multiply' 模式，可根据需求调整
        ctx.globalCompositeOperation = 'multiply';

        // 设置蒙版颜色，这里使用你之前提到的科技感蓝色
        ctx.fillStyle = 'rgb(70, 99, 153)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 恢复默认合成操作
        ctx.globalCompositeOperation = 'source-over';

        return canvas;
      }


      let layer1 = new TileLayer({
        source: new XYZ({
          // url: url_Vector,
          wrapX: false,
          // tileLoadFunction: function (tile, src) {
          //   const img = new Image();
          //   img.crossOrigin = 'anonymous';
          //   img.src = src;
          //   img.onload = function () {
          //     const modifiedCanvas = modifyTileColor(img);
          //     tile.getImage().src = modifiedCanvas.toDataURL();
          //   };
          //   img.onerror = function () {
          //     tile.setState(TileState.ERROR);
          //   };
          // }
        }),

      })
      this.layers.push(layer1)


      const map = new Map({
        target: 'Dialogcontainer',
        layers: [layer1],
        controls: [],
        view: new View({
          projection: "EPSG:3857",
          center: fromLonLat([lon, lat]),
          // constrainResolution: true,
          smoothResolutionConstraint: true,
          minZoom: 6,
          zoom: 15,
          maxZoom: 15
        })
      });

      that.map = map

      const url_Vector_MARK = "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + this.key
      let layer2 = new TileLayer({
        source: new XYZ({
          url: url_Vector_MARK,
          wrapX: false

        }),
      })

      const innerPolygonCoordinates1 = geo.coordinates[0][0].map(([lng, lat]) => {
        const c = fromLonLat([lng, lat]);

        return c;
      });

      const polygons = [innerPolygonCoordinates1].map(coords => new Polygon([coords]));


      const source = new SourceVector({
        features: polygons.map(polygon => {
          const feature = new Feature({
            geometry: polygon
          });
          return feature;
        })
      });

      // 创建样式
      const style = new Style({
        stroke: new Stroke({
          color: '#00FFFF',
          width: 4
        }),
        // fill: new Fill({
        //   color: 'rgba(0, 255, 255, 0.5)'
        // })
      });

      // 创建矢量图层
      const vectorLayer = new LayerVector({
        source: source,
        style: style
      });
      // 添加图层到地图
      that.map.addLayer(vectorLayer);
      that.map.addLayer(layer2)

      getNewCarRecord().then(data => {
        // 数据预处理：提取坐标点
        let g3 = []
        let g4 = []
        let g5 = []
        let g6 = []
        let xny = []
        const allPoints = data.data.map(e => {
          const [x, y] = fromLonLat([e.geoJson.coordinates[0], e.geoJson.coordinates[1]]);
          if (e.standardEmission == null) {
            g5.push(new Feature({
              geometry: new Point([x, y]),
              originalData: e,
              weight: 1 // 热力图权重
            }))
          } else if (e.standardEmission == '国三' || e.standardEmission == 'g3') {

            g3.push(new Feature({
              geometry: new Point([x, y]),
              originalData: e,
              weight: 1 // 热力图权重
            }))
          } else if ((e.standardEmission == '国四' || e.standardEmission == 'g4')) {
            g4.push(new Feature({
              geometry: new Point([x, y]),
              originalData: e,
              weight: 1 // 热力图权重
            }))
          } else if ((e.standardEmission == '国五' || e.standardEmission == 'g5')) {
            g5.push(new Feature({
              geometry: new Point([x, y]),
              originalData: e,
              weight: 1 // 热力图权重
            }))
          } else if (e.standardEmission == '国六' || e.standardEmission == 'g6') {
            g6.push(new Feature({
              geometry: new Point([x, y]),
              originalData: e,
              weight: 1 // 热力图权重
            }))
          } else if ((e.standardEmission == '新能源' || e.standardEmission == 'xny')) {
            xny.push(new Feature({
              geometry: new Point([x, y]),
              originalData: e,
              weight: 1 // 热力图权重
            }))
          }

        });

        // 共享数据源
        const sourceg3 = new SourceVector({
          features: g3
        });
        const sourceg4 = new SourceVector({
          features: g4
        });

        const sourceg5 = new SourceVector({
          features: g5
        });


        const sourceg6 = new SourceVector({
          features: g6
        });

        const sourcexny = new SourceVector({
          features: xny
        });


        // 配置参数
        const config = {
          // 基础点配置
          point: {
            radius: 7.5,                 // 点半径
            color: 'rgba(51, 255, 153)' // 点颜色
          },
          // 热力图配置
          heatmap: {
            radius: 7,
            blur: 12,
            gradient: [
              'rgba(0, 0, 255, 0)',
              'rgba(0, 0, 255, 0.3)',
              'rgba(0, 128, 255, 0.5)',
              'rgba(0, 255, 0, 0.6)',
              'rgba(255, 255, 0, 0.7)',
              'rgba(255, 128, 0, 0.8)',
              'rgba(255, 0, 0, 0.9)'
            ],
            minZoom: 7,
            maxRadiusAtMinZoom: 5,
            minWeightAtMinZoom: 0.3
          },
          // 切换阈值
          switchZoom: 16
        };

        let GroupMap = this.GroupMap
        const pointLayerg3 = new LayerVector({
          source: sourceg3,
          style: new Style({
            image: new CircleStyle({
              radius: config.point.radius,
              fill: new Fill({ color: GroupMap['国三'] }),
            }),
            zIndex: 39
          })
        });

        const pointLayerg4 = new LayerVector({
          source: sourceg4,
          style: new Style({
            image: new CircleStyle({
              radius: config.point.radius,
              fill: new Fill({ color: GroupMap['国四'] }),
            }),
            zIndex: 39
          })
        });


        const pointLayerg5 = new LayerVector({
          source: sourceg5,
          style: new Style({
            image: new CircleStyle({
              radius: config.point.radius,
              fill: new Fill({ color: GroupMap['国五'] }),
            }),
            zIndex: 39
          })
        });


        const pointLayerg6 = new LayerVector({
          source: sourceg6,
          style: new Style({
            image: new CircleStyle({
              radius: config.point.radius,
              fill: new Fill({ color: GroupMap['国六'] }),
            }),
            zIndex: 39
          })
        });


        const pointLayerxny = new LayerVector({
          source: sourcexny,
          style: new Style({
            image: new CircleStyle({
              radius: config.point.radius,
              fill: new Fill({ color: GroupMap['新能源'] }),
            }),
            zIndex: 39
          })
        });


        this.pointLayerg3 = pointLayerg3
        this.pointLayerg4 = pointLayerg4
        this.pointLayerg5 = pointLayerg5
        this.pointLayerg6 = pointLayerg6
        this.pointLayerxny = pointLayerxny


        that.map.addLayer(pointLayerg5);
        that.map.addLayer(pointLayerg6);
        that.map.addLayer(pointLayerxny);
        that.map.addLayer(pointLayerg4);
        that.map.addLayer(pointLayerg3);

      });

    },
    changeTab(e) {

      this.nav = e.key
      if (this.nav === 0 && this.map) {
        this.$nextTick(() => {
          this.map.updateSize();
        });
      }
    },
    /*企业门禁左侧内容接口*/
    GetMjEnterpriseInfo(data) {
      getMjEnterpriseInfo({ regionId: data })
        .then((res) => {
          let Data = res.data;
          this.leftList.enterpriseName = Data.regionName;
          this.leftList.phone = Data.phone;
          this.leftList.industrys = Data.industrys;
          this.$set(this.leftList, 'district', Data.district)
          this.leftList.addr = Data.detailedAddress;
          this.leftList.industryClassification = Data.industryClassification;
          if (Data.vehicleTotalNum) {
            this.leftList.vehicleTotalNum = Data.vehicleTotalNum;
          } else {
            this.leftList.vehicleTotalNum = "暂无数据";
          }
          if (Data.hgvRatio) {
            this.leftList.hgvRatio = Data.hgvRatio * 100 + "%";
          } else {
            this.leftList.hgvRatio = "暂无数据";
          }
          this.initMap(res.data.geoJson)
        })
        .catch((err) => { });
    },

    /*关闭弹出页*/
    hideModal() {
      if (this.map) {
        // 移除地图上的所有图层
        this.map.getLayers().clear();
        // 卸载地图
        this.map.setTarget(null);
        // 销毁地图实例
        this.map = null;
      }
      this.$emit("DiaClose");
    },
    /*table列表相关*/
    GetMjVehicleLocationPage(data, num) {
      let nums = 1;
      if (num) {
        nums = num;
      }
      getMjVehicleLocationPage({
        companyName: data.enterpriseName,
        limit: 10,
        page: nums,
      })
        .then((res) => {
          this.pageTotal = res.total;
          let dataList = res.data;
          let arr = [];
          for (let v of dataList) {
            let obj = {};
            obj.Akeys1 = v.actTime;
            obj.Akeys2 = v.channelName;
            obj.Akeys3 = v.companyName;
            obj.Akeys4 = v.plateColor;
            obj.Akeys5 = v.plateNo;
            obj.Akeys6 = v.standardEmission;
            obj.Akeys7 = v.vehicleMode;
            obj.Akeys8 = v.vehicleType;
            arr.push(obj);
          }
          this.list = arr;
        })
        .catch((err) => { });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.GetMjVehicleLocationPage(this.dataList, val);
    },

    /*遥测门站左侧内容接口*/
    GetYcCheckSite(data) {
      getYcCheckSite({ cId: data.cId })
        .then((res) => {
          this.leftList = data; //弹窗左侧数据
          var obj = res.data;
          for (let i = 0; i < obj.length; i++) {
            if (data.Id === obj[i].siteId) {
              this.leftList.siteName = obj[i].siteName;
              this.leftList.vehicleNum = obj[i].vehicleNum;
              this.leftList.hgvNum = obj[i].hgvNum;
              this.leftList.hgvRatio = obj[i].hgvRatio;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /*关闭弹出页*/
    hideModal() {
      this.$emit("DiaClose");
    },
    /*table列表相关*/
    GetYcCheckResult(data, num) {
      let nums = 1;
      if (num) {
        nums = num;
      }
      getYcCheckResult({
        siteId: data.siteId,
        limit: 10,
        page: nums,
      })
        .then((res) => {
          this.pageTotal = res.total;
          let dataList = res.data;
          let arr = [];
          for (let v of dataList) {
            let obj = {};
            obj.ycmz1 = v.plateNo;
            obj.ycmz2 = v.jcsj;
            obj.ycmz3 = v.cojg;
            obj.ycmz4 = v.nojg;
            obj.ycmz5 = v.hcjg;
            obj.ycmz6 = v.btgdjg;
            arr.push(obj);
          }
          this.list = arr;
        })
        .catch((err) => { });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getYcCheckResult(this.dataList, val);
    },
  },
};
</script>

<style scoped lang="scss">
$color-blue: #00fff4;
$color-blue-dark: #2e9ef2;

::v-deep .el-table tbody tr:hover>td {
  // background-color: transition !important; //修改成自己想要的颜色即可
  color: white;
  background: #00aaff21;
}

::v-deep .el-dialog {
  height: 91vh;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(180deg,
      $color-blue 0%,
      $color-blue-dark 100%);
  border-image-slice: 1;
  background: #04091cf0;
  box-shadow: 0 -1px 20px 0 $color-blue;
  border-radius: 0;
  margin-top: 4.5vh !important;
  border-top: 1px solid $color-blue;

  .el-dialog__body {
    padding: 30px 50px;
  }

  .el-dialog__headerbtn {
    border: 2px solid $color-blue;
    border-radius: 100px;
    padding: 2px;

    .el-dialog__close {
      color: $color-blue;
      font-size: 20px;
    }
  }

  .title {
    color: #f0f6fb;
    font-size: 31px;
    text-align: center;
    padding: 0 20px 20px;
    position: relative;

    .line {
      width: 145px;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid;
      border-image: linear-gradient(90deg,
          #00000000 0%,
          #00fff488 20%,
          #00fff4 50%,
          #00fff488 80%,
          #00000000 100%) 1;
    }
  }

  .dialog-body {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 830px;

    .leftbox {
      width: 331px;
      height: 100%;

      .message {
        width: 100%;
        margin-bottom: 45px;

        .m-list {
          width: 100%;

          .m-item {
            width: 100%;
            height: 90px;
            margin-bottom: 26px;
            display: flex;
            background-image: linear-gradient(0deg,
                #17a1f000 0%,
                #0f94a22b 100%);
            border: 1px solid;
            border-image: linear-gradient(92deg,
                #00fff240 0%,
                transparent 1%,
                transparent 99%,
                #2e9ef240 100%) 1;

            .m-icon {
              width: 90px;
              height: 90px;
              margin-right: 15px;
            }

            .m-data {
              flex: 1;
              height: 100%;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;

              span {
                width: 100%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 20px;
                color: #07c8d1;

                &:nth-child(2) {
                  font-size: 20px;
                  color: #f6f6f6;
                }
              }
            }

            &:last-child {
              margin-bottom: 0px;
            }
          }
        }

        &:nth-child(1) {
          .m-list {
            .m-item {
              @for $i from 1 through 5 {
                &:nth-child(#{$i}) {
                  .m-icon {
                    background: url("~@/assets/images/dialog-message-icon#{$i}.svg") no-repeat center;
                    background-size: 50px 50px;
                  }
                }
              }
            }
          }
        }

        &:nth-child(2) {
          .m-list {
            .m-item {
              @for $i from 1 through 2 {
                &:nth-child(#{$i}) {
                  .m-icon {
                    background: url("~@/assets/images/dialog-message-icon#{$i+4}.svg") no-repeat center;
                    background-size: 50px 50px;
                  }
                }
              }
            }
          }
        }

        &:last-child {
          margin-bottom: 0px;
        }
      }
    }

    .rightbox {
      width: 1270px;
      height: 100%;

      .content {
        width: 100%;
        height: calc(100% - 71px);
        background-image: linear-gradient(0deg, #17a1f000 0%, #0f94a22b 100%);
        border: 1px solid;
        border-image: linear-gradient(89deg,
            #00fff240 0%,
            transparent 1%,
            transparent 99%,
            #2e9ef240 100%) 1;

        .t-tr {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 50px;
          margin-top: 12px;
          white-space: nowrap;

          &.t-header {
            margin-top: 0px;
            font-size: 20px;
            color: #07c8d1;
            height: 70px;

            .t-th {
              line-height: 70px;
            }
          }

          &.t-body {
            font-size: 18px;
            color: #c8c8c8;
            cursor: pointer;

            &:hover {
              //color: #edf8f9;
              border: 1px solid;
              border-image: linear-gradient(90deg,
                  #00000000 0%,
                  #00fff411 25%,
                  #ffffff55 50%,
                  #00fff411 75%,
                  #00000000 100%) 1;

              ::v-deep .el-button--mini {
                color: #edf8f9;
              }
            }
          }

          .t-th {
            display: inline-block;
            width: 60px;
            text-align: center;
            white-space: nowrap;
            line-height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;

            &.w-90 {
              width: 90px;
            }

            &.w-100 {
              width: 100px;
            }

            &.w-130 {
              width: 130px;
            }

            &.w-150 {
              width: 150px;
            }

            &.w-180 {
              width: 180px;
            }

            ::v-deep .el-button--mini {
              width: 60px;
              background: transparent;
              border: none;
              padding: 0;
              color: #909090;
              font-size: 12px;

              &:hover {
                color: #edf8f9;
              }
            }
          }

          .webkit-box2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-height: 25px;
            white-space: normal;
          }
        }

        .m-list-box {
          width: 100%;
          height: 690px;
          overflow: hidden;
        }

        .m-paging {
          width: 100%;
          margin-top: 25px;

          .el-pagination__total {
            color: #07c8d1;
            font-size: 16px;
          }

          .el-pagination button:disabled {
            &:hover {
              color: #fff;
            }
          }

          .el-pagination .btn-prev,
          .el-pagination .btn-next {
            background-color: transparent;
            color: #fff;

            &:hover {
              color: #07c8d1;
            }
          }

          .el-pagination .btn-prev .el-icon,
          .el-pagination .btn-next .el-icon {
            font-size: 16px;
          }

          .el-pager li {
            font-size: 16px;
            color: #07c8d1;
            background-color: transparent;
          }

          .el-pager li.active {
            color: #fff;
          }

          .el-pagination__jump {
            color: #07c8d1;
            font-size: 16px;
          }

          .el-input__inner {
            background-color: transparent;
            color: #fff;
            border: 1px solid #07c8d1;
            border-radius: 12px;
          }

          .el-pagination__editor {
            margin: 0px 5px;
          }
        }
      }
    }
  }
}

.m-title {
  margin-bottom: 40px;
  font-size: 24px;
  color: #effafb;

  span {
    &:nth-child(1) {
      margin-right: 32px;
    }
  }

  .sanjiao {
    display: inline-block;
    position: relative;
    top: 0px;
    width: 15px;
    height: 15px;
    background: url("~@/assets/images/sanjiao.svg") no-repeat center center;
    background-size: 15px 15px;
  }
}

.m-controls {
  position: relative;
  display: flex;
  margin-bottom: 20px;

  .large-btn1 {

    display: flex;
    align-items: center;
    margin-right: 30px;
    border: solid 1px #f3e8e822;
    min-width: 270px;
    cursor: pointer;

    &.active {
      background-size: 26px 26px;
      border: solid 1px #00fff499;
    }
  }

  .large-btn {
    width: 50px;
    height: 54px;
    cursor: pointer;
    background: #0c1124 url("~@/assets/images/layer.svg") no-repeat center center;
    background-size: 26px 26px;
    margin-right: 10px;

    @for $i from 0 through 6 {
      &.nav-#{$i} {
        background: #0c1124 url("~@/assets/images/m-nav-#{$i}.svg") no-repeat center center;
        background-size: 26px 26px;

        &.active {
          background: #0c1124 url("~@/assets/images/m-nav-#{$i}-.svg") no-repeat center center;
          background-size: 26px 26px;
        }
      }
    }

  }
}

.choice2 {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 水平居中 */
  font-size: 18px;

  .el-date-editor {
    // width: 600px;
  }

  .el-input__inner {
    background-color: transparent;
    border-color: #80ffff;
    box-shadow: 1px 1px 5px 1px RGB(128, 255, 255, 0.8) inset;
    height: 30px;
    color: white;
  }

  .el-range-separator {
    color: white;
  }

  ::v-deep .el-range-input {
    background-color: transparent;
    color: white;
  }

  .el-input__icon {
    line-height: 30px;
  }

}
</style>
<style scoped lang="scss">
/* 表格整体背景透明 */
::v-deep .el-table th {

  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table {
  background: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;

}

::v-deep .pagination-container {
  background-color: transparent;
}

/* 表格行文字颜色为白色 */
::v-deep .el-pagination__total,
::v-deep .el-pagination__jump {
  color: #ffffff !important;
  /* 白色 */
}

::v-deep .el-table__body td,
::v-deep .el-table__header th {
  color: #ffffff !important;
  /* 白色 */
}

/* 表格头部背景透明 */
::v-deep .el-table__header-wrapper {
  background: transparent !important;
}

/* 表格头部文字颜色（可选，若需单独调整） */
::v-deep .el-table__header th {
  color: #07c8d1 !important;
  /* 白色 */
}

/* 斑马线背景（可选，若需要透明斑马线） */
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped {
  background: transparent !important;
}

/* 分页组件整体文字颜色为白色 */
::v-deep .el-pagination {
  color: #ffffff !important;
  /* 白色 */
}

/* 分页按钮背景透明 */
::v-deep .el-pagination .el-pager li,
::v-deep .el-pagination .el-pager .btn-next,
::v-deep .el-pagination .el-pager .btn-prev {
  background: transparent !important;
  border-color: #ffffff !important;
  /* 可选：添加白色边框 */
}

/* 选中页背景色（hover 效果可自定义） */
::v-deep .el-pagination .el-pager li.active {
  background: rgba(255, 255, 255, 0.1) !important;
  /* 半透明白色 */
  border-color: #ffffff !important;
  /* 可选：白色边框 */
}

/* 分页按钮 hover 效果（可选） */
::v-deep .el-pagination .el-pager li:hover,
::v-deep .el-pagination .el-pager .btn-next:hover,
::v-deep .el-pagination .el-pager .btn-prev:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  /* 半透明白色 */
}
</style>
<style lang="scss">
.elDatePicker.el-picker-panel {
  color: #fff;
  /* 设置当前面板的月份的字体为白色 */
  background: #073040;
  /* 定义整体面板的颜色 */
  border: 1px solid #1384b4;
  opacity: 1;
  /* 确保不透明度为1（完全不透明） */

  /* 定义整体面板的轮廓 */
  .el-picker-panel__sidebar {
    background: #0f94a22b;
    /* 定义整体面板的颜色 */
    color: #fff;
    /* 设置当前面板的月份的字体为白色 */

  }

  .el-picker-panel__shortcut {
    color: #fff;
    /* 设置当前面板的月份的字体为白色 */

  }

  .el-picker-panel__icon-btn {
    /* 设置年份月份调节按钮颜色 */
    color: #ffffff;
  }

  .el-date-picker__header-label {
    /* 设置年月显示颜色 */
    color: #ffffff;
  }

  .el-date-table th {
    /* 设置星期颜色 */
    color: #ffffff;
  }

  /* 新增：选择框样式 */
  .el-input__inner {
    color: #ffffff;
    background-color: #002450;
    border-color: #1384b4;
  }

  .el-input__prefix,
  .el-input__suffix {
    color: #ffffff;
  }

  /* 新增：范围选择样式 */
  .el-range-separator {
    color: #ffffff;
  }

  .el-date-table td.today span {
    color: #1384b4;
  }

  .el-date-table td.current:not(.disabled) span,
  .el-date-table td.selected span {
    // background-color: #1384b4;
    color: #ffffff;

  }


  .el-date-table td.in-range:hover span,
  .el-date-table td.end-date span,
  .el-date-table td.start-date span {
    background: #1384b4;
    color: #ffffff;

  }

  .el-date-table td.in-range div {
    background-color: rgba(19, 132, 180, 0.2);
  }

  .el-date-table td.normal div {
    background-color: hsl(196, 19%, 34%);
  }

  .el-date-table td div {
    background-color: #073040;
    /* 使用 background-color 而非 background */


  }
}
</style>